@charset "UTF-8";

@import "../core/reset";

body {
  background: yellow;
  width: 100%;
  height: 100%;
  @include flexbox();
  @include flex-direction(column);
  .activityHeader {
    width: 100%;
    height: .4rem;
    background: #de4943;
    @include flexbox();
    a {
      width: .3rem;
      height: .4rem;
      background: url("../images/headback.jpg");
      margin-left: .08rem;
    }

    h2 {
      @include flex(1);
      text-align: center;
      color: white;
      line-height: 40px;
    }

    span {
      width: .3rem;
      height: .4rem;
      background: url("../images/headIcon.png") no-repeat;
      background-position: -150px 6px;
      margin-right: .08rem;
    }
  }
  #activityScrollWrapper {
    @include flex(1);
    width: 100%;
    background: white;
    //iscroll outlayer must overflow hidden
    overflow: hidden;
    #activityListWrapper {
      @include flexbox();
      @include flex-direction(row);
      @include flex-wrap(wrap);
      li {
        background: orange;
        width: 50%;
        height: 70vw;
        padding: .05rem;
        @include flexbox();
        a {
          background: white;
          width: 100%;
          height: 100%;
          display: block;
          position: relative;
          img {
            width: 100%;
            height: 46vw;

          }

          p {
            color: black;
            @include ellipsis(null, 2);
            font-size: .13rem;
            line-height: .16rem;
          }

          span {
            position: absolute;
            bottom: .05rem;
            left: .05rem;
          }

          i {
            display: inline-block;
            width: .8rem;
            height: .24rem;
            line-height: .24rem;
            background: red;
            text-align: center;
            position: absolute;
            bottom: .05rem;
            right: .05rem;
            color: white;
          }

        }




      }
    }
  }


}

.activityListHeader {
    text-align: center;
    height: .4rem;
    line-height: .4rem;
}
.activityListHeader img {
    width: .15rem;
    display: inline-block;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform 150ms;
    -webkit-transition: transform 150ms;
}
.activityListFooter {
    text-align: center;
    height: .4rem;
    line-height: .4rem;
}
.activityListFooter img {
    width: .15rem;
    display: inline-block;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform 150ms;
    -webkit-transition: transform 150ms;
}
.up {
    transform: rotate(360deg) !important;
    -webkit-transform: rotate(360deg) !important;
}


.down {
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
}
